window.addEventListener("load", function () {
    // banner的动画
    new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: true,
    })
    // 每个标题
    // 第一个板块的标题
    let top_title = [{
        a: "为开发者提供云服务",
        b: "基于API技术向客户提供多领域,多场景的Sass服务;助理开发者提供开发效率,加快工作进程",
        c: "探索云服务&gt;",
    }, {
        a: "海量的API服务,丰富的API内分类",
        b: "提供400多种API和数据块,快捷,易用,稳定,极大的满足了用户需求;节省了寻找时间,节约了数据维护的服务器和人力成本",
        c: "探索API&gt;",
    }, {
        a: "慧集/APIMaster",
        b: "API集成台中包括:API设计,API开发,API测试,API发布,API网关,API市场等功能,支持API的鉴权,流控,熔断等,涵盖了API的全生命周期",
        c: "探索慧集&gt;",
    }, {
        a: "数据安全和可靠合规的服务",
        b: "保证每一个客户的放心使用",
        c: "立即使用&gt;",
    }]

    function cc(v) {
        var a1 = ""
        a1 = `
        <h1 class="tc fs38 m15 pt80">${top_title[v].a}</h1>
                <p class="tc fs14 mb30">${top_title[v].b}</p>
                <p class="tc pb35"> <a href="#" class="fbule fs12">${top_title[v].c}</a></p>
                <div id="service" class="ma"></div>
                <div class="API clearfix vvv"></div>
                `
        return a1
    }
    cc0.innerHTML = cc(0)
    // 下面的块块
    let cc0_1_0 = [{
        a: './imgs/service01.svg" alt="" style="width: 240px',
        b: "API私有化服务",
        c: "可部署本地&专有云的Web API",
    }, {
        a: './imgs/service02.svg" alt="" style="width: 240px',
        b: "源码云监测",
        c: "实时代码托管,威胁情报监控",
    }, {
        a: './imgs/service03.svg" alt="" style="width: 240px',
        b: "源码有赢",
        c: "一站式营销活动服务平台",
    }, {
        a: './imgs/service04.svg" alt="" style="width: 240px',
        b: "YuanMa API",
        c: "API开发者写作平台",
    }, ]
    let b0 = ""
    cc0_1_0.forEach(v => {
        b0 += `<div class="boxs w240 fl ml20"><img src="${v.a}" alt="" style="width: 240px;">
        <div class="pb23l22">
            <p class="fs22 mb7">${v.b}</p>
            <p class="fs12 mt14b26">${v.c}I</p>
            <a href="#" class="fbule fs12">去搜索</a>
        </div>
    </div>`
    })
    cc0_1.innerHTML = b0

    // 第二个板块的标题
    cc1.innerHTML = cc(1)
    // 下面的板块
    let cc1_1_0 = [{
            bgi: "./imgs/api01.svg",
            title: "生活服务"
        },
        {
            bgi: "./imgs/api02.svg",
            title: "金融科技"
        },
        {
            bgi: "./imgs/api03.svg",
            title: "交通地理"
        },
        {
            bgi: "./imgs/api04.svg",
            title: "充值缴费"
        },
        {
            bgi: "./imgs/api05.svg",
            title: "智能数据"
        },
        {
            bgi: "./imgs/api06.svg",
            title: "企业工商"
        },
        {
            bgi: "./imgs/api07.svg",
            title: "应用开发"
        },
        {
            bgi: "./imgs/api08.svg",
            title: "电子商务"
        },
        {
            bgi: "./imgs/apic1.svg",
            title: "吃喝玩乐"
        },
        {
            bgi: "./imgs/apic2.svg",
            title: "文娱视频"
        },
    ]
    let b1 = "";
    cc1_1_0.forEach(v => {
        b1 += `
        <div class="boxs fl ml20 mb20" style="background: url(${v.bgi}) no-repeat center 40%;">
        <p class="tc fs16 pt80">${v.title}</p>
    </div>`
    })
    cc1_1.innerHTML = b1

    // 第三个板块
    cc2.innerHTML = cc(2)
    let cc2_1_0 = [{
        a: "./imgs/master-item-icon-01.svg",
        b: "API智能路由",
        c: "通过可视化前面配置,即可实现无代码,免开发快速接入"
    }, {
        a: "./imgs/master-item-icon-02.svg",
        b: "数据库生成API",
        c: "无代码的配置方式将主流数据库输出位为微服务API接口"
    }, {
        a: "./imgs/master-item-icon-03.svg",
        b: "API智能建构",
        c: "多个API通过可视化的流程编排与业务逻辑重组,融合新的API"
    }, {
        a: "./imgs/master-item-icon-04.svg",
        b: "API智能路由",
        c: "根据入参属性进行智能分配,实现路由管理,控制API调用流向"
    }, {
        a: "./imgs/master-item-icon-05.svg",
        b: "简化API开发",
        c: "助力开发者创建API,批量测试,跟踪开发进度,自动生成文档"
    }, {
        a: "./imgs/master-item-icon-06.svg",
        b: "API开放共享",
        c: "将核心能力以API形式进对外输出,赋能到多领域,多场景的应用程序中"
    }, ]
    let b2 = "";
    cc2_1_0.forEach(v => {
        b2 += `<div>
        <div></div>
        <p class="fs18 mb7">
            <span
                style="background: url(${v.a}) no-repeat  center;">&emsp;</span>
                ${v.b}</p>
        <p class="mt0">${v.c}</p>
    </div>`
    })
    cc2_1_a.innerHTML = b2
    // Take_it(cc3_1)
    // console.log(Take_it("#cc3_1"))
    // 第四板块
    cc3.innerHTML = cc(3)
    // 第五板块
    cc4.innerHTML = cc(3)
    let cc4_1_0 = [{
        a: "./imgs/security-logo-item01.svg",
        b: "高新技术产业"
    }, {
        a: "./imgs/security-logo-item02.svg",
        b: "CMMI3"

    }, {
        a: "./imgs/security-logo-item03.png",
        b: "ISO9001"

    }, {
        a: "./imgs/security-logo-item04.png",
        b: "ISO20000"

    }, {
        a: "./imgs/security-logo-item05.png",
        b: "ISO27001"
    }, {
        a: "./imgs/security-logo-item06.png",
        b: "网络安全三等保障"
    }]
    let b3 = ""
    cc4_1_0.forEach(v => {
        b3 += `<div class="fl ml40"><img src="${v.a}" alt=""><p class="tc">${v.b}</p></div>`
    })
    cc4_1.innerHTML = b3

    // 页脚
    let footer_0 = [{
        a: "联系与支持",
        b: "400-882-7715",
        c: "售前咨询",
        d: "客服&售后",
        e: "常见问题",
        f: "急速工单",
        g: "投诉与建议"
    },{
        a: "关于源码",
        b: "400-882-7715",
        c: "售前咨询",
        d: "客服&售后",
        e: "常见问题",
        f: "急速工单",
        g: "投诉与建议"
    },{
        a: "快速入口",
        b: "400-882-7715",
        c: "售前咨询",
        d: "客服&售后",
        e: "常见问题",
        f: "急速工单",
        g: "投诉与建议"
    },{
        a: "产品服务",
        b: "400-882-7715",
        c: "售前咨询",
        d: "客服&售后",
        e: "常见问题",
        f: "急速工单",
        g: "投诉与建议"
    },{
        a: "解决方案",
        b: "400-882-7715",
        c: "售前咨询",
        d: "客服&售后",
        e: "常见问题",
        f: "急速工单",
        g: "投诉与建议"
    }]
    let b4 = ""
    footer_0.forEach(v => {
        b4 += ` <div class="leftbox fl">
        <p class="fs18">${v.a}</p>
        <ul class="fs12">
            <li>${v.b}</li>
            <li>${v.c}</li>
            <li>${v.d}</li>
            <li>${v.e}</li>
            <li>${v.f}</li>
            <li>${v.g}</li>
        </ul>
    </div>`
    })
cc5.innerHTML=b4
})